<template>
  <div class="app-container">
    <el-form ref="filterForm" :inline="true" :model="listQuery" class="filter-container">
      <el-form-item prop="userId">
        <el-input v-model="listQuery.userId" size="small" placeholder="UserID" clearable style="width: 100px;" @keyup.enter.native="handleFilter" />
      </el-form-item>
      <el-form-item prop="userName">
        <el-input v-model="listQuery.userName" size="small" placeholder="姓名" clearable style="width: 200px;" @keyup.enter.native="handleFilter" />
      </el-form-item>
      <el-form-item prop="veevacode">
        <el-input v-model="listQuery.veevacode" size="small" placeholder="VeevaCode" clearable style="width: 200px;" @keyup.enter.native="handleFilter" />
      </el-form-item>
      <el-form-item prop="isinterior">
        <el-select v-model="listQuery.isinterior" size="small" placeholder="是否内部用户" clearable style="width: 140px" @change="handleFilter">
          <el-option v-for="item in isinteriorOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="type">
        <el-select
          v-model="listQuery.type"
          size="small"
          placeholder="请选择用户类型"
          filterable
          clearable
          @change="handleFilter"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >筛选</el-button>
        <el-button
          size="small"
          @click="resetFilter"
        >重置</el-button>
        <el-divider direction="vertical" />
        <el-button
          size="small"
          icon="el-icon-download"
          :loading="exportListLoading"
          :disabled="exportListLoading"
          @click="exportList"
        >导出名单</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      stripe
      fit
      highlight-current-row
    >
      <el-table-column label="UserID" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.userId }}
        </template>
      </el-table-column>
      <el-table-column label="医生姓名">
        <template slot-scope="scope">
          <router-link :to="`/users/list/${scope.row.userId}`">{{ scope.row.userName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column label="昵称">
        <template slot-scope="scope">
          {{ scope.row.nickName }}
        </template>
      </el-table-column>
      <el-table-column label="VeevaCode">
        <template slot-scope="scope">
          {{ scope.row.veevacode }}
        </template>
      </el-table-column>
      <el-table-column label="手机号码" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.tel }}
        </template>
      </el-table-column>
      <el-table-column label="医院">
        <template slot-scope="scope">
          {{ scope.row.hospitalName }}
        </template>
      </el-table-column>
      <el-table-column label="科室" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.department }}
        </template>
      </el-table-column>
      <el-table-column label="用户类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.typename }}
        </template>
      </el-table-column>
      <el-table-column label="内部用户" width="80" align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.isinterior === 1" class="el-icon-check text-success" />
          <i v-else class="el-icon-close text-warning" />
        </template>
      </el-table-column>
      <el-table-column label="预约类型" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.channelId === 1"
            effect="plain"
            size="mini"
          >自主参会</el-tag>
          <el-tag
            v-if="scope.row.channelId === 2"
            effect="plain"
            size="mini"
          >会议海报邀约</el-tag>
          <el-tag
            v-if="scope.row.channelId === 3"
            effect="plain"
            size="mini"
          >代表邀约</el-tag>
          <el-tag
            v-if="scope.row.channelId === 4"
            effect="plain"
            size="mini"
          >测试邀约</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="预约时间" width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :auto-scroll="false" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="fetchData" />
  </div>
</template>

<script>
import {
  getUserType
} from '@/api/baseData'
import {
  meetingApplyList
} from '@/api/meetings'
import {
  exportMeetingApply
} from '@/api/statements'
import Pagination from '@/components/Pagination'
import { blobExport } from '@/utils'

export default {
  name: 'MeetingApplyList',
  components: {
    Pagination
  },
  props: {
    meetingId: {
      type: String,
      default: ''
    },
    meetingName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        meetingId: this.meetingId,
        userId: undefined,
        userName: undefined,
        veevacode: undefined,
        isinterior: undefined,
        type: undefined,
        page: 1,
        size: 20
      },
      typeOptions: [],
      isinteriorOptions: [
        {
          name: '是',
          id: 1
        },
        {
          name: '否',
          id: 0
        }
      ],
      exportListLoading: false
    }
  },
  created() {
    this.fetchUserType()
    this.fetchData()
  },
  methods: {
    fetchUserType() {
      getUserType().then(response => {
        // console.log(response)
        this.typeOptions = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    fetchData() {
      this.listLoading = true
      meetingApplyList(this.listQuery).then(response => {
        // console.log(response)
        this.list = response.data
        this.total = response.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.list = []
      this.fetchData()
    },
    resetFilter() {
      this.$refs.filterForm.resetFields()
      this.handleFilter()
    },
    exportList() {
      this.exportListLoading = true
      exportMeetingApply({
        id: this.meetingId
      }).then(response => {
        // console.log(response)
        blobExport(response, `${this.meetingName} - 会议预约名单.xlsx`)

        this.$message({
          type: 'success',
          message: '导出成功！',
          duration: 5000
        })
        this.exportListLoading = false
      }).catch(err => {
        console.log(err)
        this.exportListLoading = false
      })
    }
  }
}
</script>
